import { useEffect, useState } from "react"

const Child = (props:any) => {
useEffect(() => {
// 组件卸载的时候也会执行 只需要在useEffect中返回一个清理函数即可 (见Child子组件)
// 组件更新之前也会执行(见Child组件)
// 使用场景:适合做防抖节流(必满频繁请求)
console.log('init Child');
let timmer = setTimeout(() => {
    fetch('http://localhost:5173/?name=' + props.name)
},500)
return () => {
    clearTimeout(timmer)
    console.log('unmount Child'); 
}
},[props.name])
return <div>Child</div>
}

function EffectHook () {
    // 执行时机 => 
    // Didmount=> 组件渲染完成会立马执行
    // Didupdate=> 组件更新也会执行
    // 综上就是由Didmount和Didupdate组合起来的一个生命周期
    const [count,setCount] = useState(0)
    const [name,setName] = useState('')
    const [isShow,setIsShow] = useState(false)

//     useEffect(() => {
//     // 不仅可以读还可以操作
//    console.log('inner');
//     //依赖项的作用: => 只有count变化的时候起作用,而name变化的时候不起作用 => 只有在依赖项数组里的依赖再会起作用   
//     // 空数组的情况只走一次 => 使用场景(初始化,详情页数据)
//     },[count])
    
        return (
            <>
           <button onClick={() => setCount(count+1)}>{count}</button>
           <input value={name} onChange={(e) => setName(e.target.value)} type="text"/>
           <button onClick={() => setIsShow(!isShow)}>显示/隐藏</button>
           {isShow && <Child name={name}></Child>}
          
            </>
        )
}

export default EffectHook